<template>
  <div class="music-list">
        <h1 class="title" v-html="title"></h1>
        <div class="bg-image" :style="bgstyle" ref="bgImage">
        </div>
        <scroll :data="songs" ref="list" class="list">
            <div class="song-list-wrapper">
                <song-list :songs="songs"></song-list>
            </div>
        </scroll>
  </div>
</template>

<script>
import Scroll from "base/scroll/scroll";
import SongList from "base/song-list/song-list";
export default {
  props: {
    bgImage: {
      type: String,
      default: ""
    },
    songs: {
      type: Array,
      default: []
    },
    title: {
      type: String,
      default: ""
    }
  },
  computed: {
    bgstyle() {
      return `background-image:url(${this.bgImage})`;
    }
  },
  mounted(){
      console.log(this.$refs.bgImage.clientHeight);
      this.$refs.list.$el.style.top=`${this.$refs.bgImage.clientHeight}px`
  },
  components: {
    SongList,
    Scroll
  }
};
</script>

<style lang="scss" scoped="" type="text/css">
.music-list {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #555555;
  .title {
    position: absolute;
    top: 0;
    left: 10%;
    z-index: 40;
    width: 80%;
    //   no-wrap();
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    color: #fff;
  }
  .bg-image {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 70%;
    transform-origin: top;
    background-size: cover;
  }
  .list{
      position: fixed;
      top: 0;
      bottom: 0;
      width: 100%;
      overflow: hidden;
      background: #555555}
}
</style>
